import { Tag, Tooltip, Table, message, Popconfirm,Skeleton } from "antd";
import { useEffect, useState } from "react"
import { ClearQualifications, GetQualifications } from "../../api/goods";
import { useParams } from "react-router-dom";

const Qualifications = () => {
    document.info = [
        {
          title: "商品资质",
          url: "/qualifications",
      },
        {
            title: "商品管理",
            url: "/goods",
        }
      ]

    const [tableData, setData] = useState([]);

    const [isFirst, setFirst] = useState(true);
    const [load, setLoad] = useState({
        loading: false
    });

    const params = useParams();



    //删除旗袍确认 start
    const confirm = (props) => {
         deleteQ(props);
    };
    const cancel = (e) => {
        console.log(e);
        message.error('已取消');
    };
    //删除旗袍确认 end



    const columns = [
        {
            title: "序号",
            dataIndex: "no",
            key: "no"
        },
        {
            title: "资质名称",
            dataIndex: "name",
            key: "name"
        },
        {
            title: "图片",
            dataIndex: "url",
            key: "url",
            render: (text) => (
                <img src={text} alt="" width={50} />
            )
        },
        {
            title: "添加时间",
            dataIndex: "time",
            key: "time",
            ellipsis: {
                showTitle: false
            },
            with: 100,
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
        },
        {
            title: "状态",
            dataIndex: "Index",
            key: "Index",
            render: (text, hang) => (
                <div>
                    {hang.isDel == 0 ? <Tag color="success" bordered={false} className="success-tag">正常
                    </Tag> : <Tag color="red" bordered={false} className="danger-tag">已删除</Tag>}
                </div>
            )
        },
        {
            title: "删除时间",
            dataIndex: "deleteTime",
            key: "deleteTime",
            ellipsis: {
                showTitle: false
            },
            with: 100,
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
        },
        {
            title: "操作",
            dataIndex: "",
            key: "",
            render: (text, hang) =>
                <Popconfirm
                    title="提示"
                    description="确认将商品删除吗?"
                    onConfirm={() => { confirm(hang.id) }}
                    onCancel={cancel}
                    okText="确定"
                    cancelText="取消"
                >
                    <div className="danger-cell btn" >彻底删除</div>
                </Popconfirm>
        },
    ]

    const getData = async () => {
        const res = await GetQualifications({ id: params.id });

        if (res?.result === 0) {
            setData(res.data);
            setFirst(false);
            setLoad((load) => ({ ...load, loading: false }));
        } else {
            message.error(res?.message);
            setLoad((load) => ({ ...load, loading: false }));
        }
    }

    // 删除资质
    const deleteQ = async (id) => {
        setLoad((load) => ({ ...load, loading: true }));
        const res = await ClearQualifications({ id: id });
        if (res?.result === 0) {
            message.success(res.message);
            getData();
        } else {
            message.error(res?.message)
            setLoad((load) => ({ ...load, loading: false }));
        }
    }


    useEffect(() => {
        getData();
    }, [])

    return (
        <>
            <div className="Containers">
            <Skeleton active loading={isFirst} paragraph={{ rows: 15 }}>
                <div className="pdw">
                    {/* {param.id} */}
                    <Table dataSource={tableData} columns={columns} bordered pagination={false} loading={load.loading}
                        style={{ marginTop: "5px" }}
                    />
                </div>
                </Skeleton>
            </div>
        </>
    )
}

export default Qualifications